// import React from 'react';
import { BlockMath } from 'react-katex'; // InlineMath
import 'katex/dist/katex.min.css';

// 包装公式组件，添加错误处理以避免控制台警告
const SafeBlockMath = ({ math }) => {
  try {
    return <BlockMath math={math} />;
  } catch (error) {
    console.warn('公式渲染错误:', error, '公式内容:', math);
    return <div className="error-message">公式渲染失败: {math}</div>;
  }
};

const MathFormulasCollection = () => {
  // 将公式定义为字符串常量，避免渲染时重复创建
  const formulas = {
    euler: "e^{i\\pi} + 1 = 0",
    gaussian: "\\int_{-\\infty}^{\\infty} e^{-x^2} \\, dx = \\sqrt{\\pi}",
    newton: "\\mathbf{F} = m\\mathbf{a}",
    schrodinger: "i\\hbar \\frac{\\partial}{\\partial t} \\Psi(\\mathbf{r}, t) = \\hat{H} \\Psi(\\mathbf{r}, t)",
    riemann: "\\zeta(s) = \\sum_{n=1}^{\\infty} \\frac{1}{n^s} = \\prod_{p \\text{ prime}} \\frac{1}{1 - p^{-s}}",
    pythagorean: "a^2 + b^2 = c^2"
  };

  return (
    <div className="math-formulas-container" style={{ 
      maxWidth: '800px', 
      margin: '0 auto', 
      padding: '20px',
      fontFamily: 'Arial, sans-serif'
    }}>
      <h2 style={{ 
        color: '#2c3e50', 
        borderBottom: '2px solid #3498db', 
        paddingBottom: '10px',
        marginBottom: '30px'
      }}>
        重要数学公式集合
      </h2>

      {/* 1. 欧拉恒等式 */}
      <div style={{ marginBottom: '25px' }}>
        <h3 style={{ color: '#3498db', marginTop: '0' }}>1. 欧拉恒等式 (Euler&apos;s Identity)</h3>
        <p>被誉为&ldquo;数学中最优美的公式&ldquo;，连接了五个基本数学常数：</p>
        <SafeBlockMath math={formulas.euler} />
      </div>

      {/* 2. 高斯积分 */}
      <div style={{ marginBottom: '25px' }}>
        <h3 style={{ color: '#3498db', marginTop: '0' }}>2. 高斯积分 (Gaussian Integral)</h3>
        <p>在概率论和统计学中具有核心地位：</p>
        <SafeBlockMath math={formulas.gaussian} />
      </div>

      {/* 3. 牛顿第二定律 */}
      <div style={{ marginBottom: '25px' }}>
        <h3 style={{ color: '#3498db', marginTop: '0' }}>3. 牛顿第二定律 (Newton&apos;s Second Law)</h3>
        <p>经典力学的基本定律：</p>
        <SafeBlockMath math={formulas.newton} />
      </div>

      {/* 4. 薛定谔方程 */}
      <div style={{ marginBottom: '25px' }}>
        <h3 style={{ color: '#3498db', marginTop: '0' }}>4. 薛定谔方程 (Schrödinger Equation)</h3>
        <p>量子力学的基本方程：</p>
        <SafeBlockMath math={formulas.schrodinger} />
      </div>

      {/* 5. 黎曼zeta函数 */}
      <div style={{ marginBottom: '25px' }}>
        <h3 style={{ color: '#3498db', marginTop: '0' }}>5. 黎曼zeta函数 (Riemann Zeta Function)</h3>
        <p>数论中的重要函数，与黎曼猜想相关：</p>
        <SafeBlockMath math={formulas.riemann} />
      </div>

      {/* 6. 毕达哥拉斯定理 */}
      <div style={{ marginBottom: '25px' }}>
        <h3 style={{ color: '#3498db', marginTop: '0' }}>6. 毕达哥拉斯定理 (Pythagorean Theorem)</h3>
        <p>直角三角形边长关系：</p>
        <SafeBlockMath math={formulas.pythagorean} />
      </div>
    </div>
  );
};

export default MathFormulasCollection;
    